TGML Format Specifications

Additions to the TGML Format Specification:

TGML Appendix A: User-Defined Descriptions of Custom Attributes

In Graphics Editor, when an attribute is selected, a short description of the element attribute is displayed in the properties pane.

Custom attributes have no description since the TGML implementation has no knowledge of the attribute. However, it is possible to use Metadata to add a description of a custom attribute:

Example TGML code containing a user-defined description of a custom attribute. When the user selects MyAttribute in the Graphics Editor properties pane the description is displayed:

Copy

<TGML>
    <Component Left="100.0" Top="100.0" Width="30.0" Height="30.0" ContentWidth="30.0" ContentHeight="30.0" MyAttribute="0" >
    
        <Metadata Name="MyAttribute" Value="This is a description of MyAttribute"/>
        .
        .
        .
    </Component>
</TGML>

The Name of the Metadata element has to be the same as the attribute name. Value contains the description.

TGML Appendix B: TGML View Object

Appendix B describes the TGML JavaScript Global Objects, the TGML View Object, and the TGML Console Object.

TGML JavaScript Global Objects

Global Object	Description
view	The view object
Console	The console object

TGML View Object

Members	Description
document	The document object
width	Width in normal pixels
height	Height in normal pixels
zoomLevel	Zoom level, a floating point value where1.0 is no zoom, <1 is zoomed out, >1 is zoomed in.
touchEnabled	Touch device (true/false)
addEventListener(type, listener[, useCapture])	Adds an event listener. Supported event: ‘resize’. See w3c standard interface EventTarget
removeEventListener(type, listener[, useCapture])	Remove an event listener. Supported event: ‘resize’. See w3c standard interface EventTarget

Example: The view properties are displayed in a textbox and updated when the viewer resizes or the zoom level changes:

Copy

<TGML>
    <TextBox FontFamily="Arial" FontSize="15" FontStyle="Normal" FontWeight="Normal" Height="30" HorizontalAlign="Center" Left="0" Name="" Opacity="1.0" Stroke="#000000" TextDecoration="None" Top="100" VerticalAlign="Middle" Width="200">
    
    <![CDATA [width/height@zoomLevel]]>

    <Script OnDocumentLoad="load"><! [CDATA [ 
        function load(evt)
        {
            function updateView()
            {
                evt.getCurrentTarget().setAttribute("Content", view.width + 'x' + view.height + '@'    + view.zoomLevel + (view.touchEnabled ? ' touch' : ' mouse'));
            }

            view.addEventLister('resize', function () { 
                updateView ();
            });
            
            updateView();
        }

    ]]>
    </Script>
    
    </TextBox>
</TGML>

TGML Console Object

Members	Description
info(obj1 [, obj2, ..., objN])	Outputs a message to the Console view
warn(obj1 [, obj2, ..., objN])	Outputs a message to the Console view
error(obj1 [, obj2, ..., objN])	Outputs a message to the Console view
log(obj1 [, obj2, ..., objN])	Outputs a message to the Console view

Example: Outputs the message “test 9” to the console view:

Copy

<TGML>
    <Script OnDocumentLoad="load"><! [CDATA [
        function load(evt)
        {
            console.log('test', 9);
        }
    ]]></Script>
</TGML>